{extend name="command/table_extend" /}
{block name='body'}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 多选删除 </button>
                </div>
            </script>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="add">添加下级</a>
    {{# if(d.table){}}
    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="curd">一键curd</a>
    {{# }}}
</script>
<script type="text/html" id="status">
    {{#  if(d.status==1){ }}
    <input type="checkbox" field="status" value="{{d.id}}" lay-skin="switch" lay-text="开启|关闭" lay-filter="sexDemo" checked>
    {{#  } else { }}
    <input type="checkbox" field="status" value="{{d.id}}" lay-skin="switch" lay-text="开启|关闭" lay-filter="sexDemo">
    {{#  } }}
</script>
{/block}
{block name='script'}
<script>
    layui.use(['table', 'treetable','form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var form = layui.form;

        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 2,
            treeSpid: 0,
            treeDefaultClose:false,
            treeIdName: 'id',
            treePidName: 'pid',
            elem: '#munu-table',
            toolbar: '#toolbarDemo',
            url: '{:url("system.menu/index")}',
            page: false,
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id',  title: 'ID', sort: true,align: 'center',},
                {field: 'title', minWidth: 250, title: '菜单名'},
                {field: 'href', title: '菜单连接',align: 'center'},
                {field: 'icon', title: '图标',align: 'center'},
                {field: 'target', title: '链接打开方式',align: 'center'},
                {field: 'table', title: '模型',align: 'center'},
                {field: 'sort',  align: 'center', title: '排序号'},
                {field: 'status',  align: 'center', title: '状态',templet:"#status"},
                {templet: '#auth-state',  align: 'center', title: '操作'}
            ]],
            checked:{
                key:'id'
            },
            done: function () {
                layer.closeAll('loading');
            }
        });

        //监听表格复选框选择
        table.on('checkbox(munu-table)', function (obj) {
            console.log(obj)
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                // layer.msg('删除' + data.id);
                var index = layer.load();
                $.post("{:url('system.menu/delete')}",{id:data.id},function (res) {
                    layer.close(index);
                    if(res.code==200){
                        layer.msg(res.msg,{time:1000},function () {
                            location.reload();
                        })
                    }else{
                        layer.msg(res.msg);
                    }
                })
                return false;
            } else if (layEvent === 'edit') {
                var index = layer.open({
                    title: '添加',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['95%', '95%'],
                    content: '{:url("system.menu/edit")}?id='+data.id,
                    end:function () {
                        location.reload();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);

                });
                return false;
            }else if (layEvent === 'add') {
                // layer.msg('修改' + data.id);
                var index = layer.open({
                    title: '添加',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['95%', '95%'],
                    content: '{:url("system.menu/add")}?id='+data.id,
                    end:function () {
                        location.reload();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);

                });
                return false;
            }else if(layEvent === 'curd'){
                console.log('haha')
            }
        });
        table.on('toolbar(munu-table)', function (obj) {
            console.log(obj)
            if(obj.event === 'add'){
                var index = layer.open({
                    title: '添加',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['95%', '95%'],
                    content: '{:url("system.menu/add")}',
                    end:function () {
                        location.reload();
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);

                });
                return false;
            }else if(obj.event === 'delete'){
                // console.log()
                var checkStatus = table.checkStatus('munu-table')
                    , data = checkStatus.data;
                var data_id = new Array();
                $.each(data,function (i,v) {
                    data_id.push(v.id);
                })
                var index = layer.load();
                $.post('{:url("system.menu/delete")}',{id:data_id},function (res) {
                    console.log(res);
                    layer.close(index)
                    if(res.code==200){
                        layer.msg(res.msg,{time:1000},function () {
                            location.reload();
                        })
                    }else{
                        layer.msg(res.msg);
                    }
                })
            }
        })

        /**
         * 监听开关
         * */
        form.on('switch(sexDemo)',function (data) {
            console.log(data);
            var status = data.elem.checked;
            // console.log(status);
            var id = data.value;
            var field = $(this).attr('field');
            var index = layer.load();
            $.post('{:url("system.menu/modify")}',{id:id,field:field},function (res) {
                layer.close(index);
                console.log(res);
                if(res.code==200){
                    layui.layer.msg(res.msg);
                }else{
                    layui.layer.msg(res.msg);
                    // table_reload();
                    data.elem.checked = !status;
                }
            })
        })
    });
</script>
{/block}